<template>
    <div class="load-modal-page" ref="screenDom">
        <div class="load-modal-page-progress" v-if="showProgress">
            <div style="width: 100px; height: 100px">
                <Loading loading tip="" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { PointerLockControls } from "three/examples/jsm/controls/PointerLockControls";
import Loading from "@/common/Loading/index.vue";

const emits = defineEmits(["load"]);
const props = defineProps({
    percentage: {
        type: Number,
        default: () => 1,
    },
    showProgress: {
        type: Boolean,
        default: () => false,
    },
    hemiLight: {
        type: Boolean,
        default: () => true,
    },
});

let screenDom = ref(null);
let Scene = null;
let Camera = null;
let Renderer = null;

const initThree = () => {
    let scene = new THREE.Scene();
    //创建相机
    let camera = new THREE.PerspectiveCamera(
        50,
        screenDom.value.clientWidth / screenDom.value.clientHeight,
        0.1,
        1000
    );
    let renderer = new THREE.WebGLRenderer({
        antialias: true,
        logarithmicDepthBuffer: true,
    });

    camera.rotation.order = "YXZ";
    Camera = camera;

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(screenDom.value.clientWidth, screenDom.value.clientHeight);
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.shadowMap.enabled = true;
    screenDom.value.appendChild(renderer.domElement);

    Renderer = renderer;

    Scene = scene;

    const fillLight1 = new THREE.HemisphereLight(0x8dc1de, 0x00668d, 1.5);
    fillLight1.position.set(2, 1, 1);
    scene.add(fillLight1);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5);
    directionalLight.position.set(-5, 25, -1);
    directionalLight.castShadow = true;
    directionalLight.shadow.camera.near = 0.01;
    directionalLight.shadow.camera.far = 500;
    directionalLight.shadow.camera.right = 30;
    directionalLight.shadow.camera.left = -30;
    directionalLight.shadow.camera.top = 30;
    directionalLight.shadow.camera.bottom = -30;
    directionalLight.shadow.mapSize.width = 1024;
    directionalLight.shadow.mapSize.height = 1024;
    directionalLight.shadow.radius = 4;
    directionalLight.shadow.bias = -0.00006;
    scene.add(directionalLight);

    //设置背景色
    // scene.background = new THREE.Color(0x88ccee);

    //添加控制器
    // camera.position.set(500, 500, 500);
    let controls1 = new OrbitControls(camera, renderer.domElement);
    let controls2 = new PointerLockControls(camera, renderer.domElement);
    controls1.enabled = false;
    controls1.enablePan = false
    console.log(controls2)
    // window.controls = new PointerLockControls(camera, renderer.domElement);

    const _render = () => {
        requestAnimationFrame(_render);
        controls1.enabled && controls1.update();
        renderer.render(scene, camera);
    };
    _render();

    emits("load", Scene, Camera, screenDom.value, renderer, controls1, controls2);
};

onMounted(() => {
    initThree();
});

onBeforeUnmount(() => {
    Renderer.forceContextLoss();
    Renderer.dispose();
    Scene.clear();
});
</script>
<style lang="less" scoped>
.load-modal-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    &-progress {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 100;
        width: 300px;
        transform: translate(-50%, -50%);
    }
}
</style>
